<template>
    <div>
        <el-page-header @back="goBack()" content="" />

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm" size="medium">

            <el-form-item label="直播封面" prop="liveCover">
                <el-upload class="uploadPic" action="#" :before-upload="beforeUploadPic" :show-file-list="false" drag>
                    <img v-if="ruleForm.liveCover" :src="downloadUrl + ruleForm.liveCover" class="avatar">
                    <el-button v-else class="uploadButton" type="primary" size="medium">上传封面</el-button>
                </el-upload>
            </el-form-item>

            <el-form-item label="直播标题" prop="liveTitle" class="liveTitle">
                <el-input v-model="ruleForm.liveTitle" placeholder="【直播类型】+ 主要标题"></el-input>
            </el-form-item>

            <el-form-item label="直播类型" prop="liveType">
                <el-radio-group v-model="ruleForm.liveType">
                    <el-radio label="0">单人</el-radio>
                    <el-radio label="1">多人</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="直播分区" prop="livePartition">
                <el-select v-model="ruleForm.livePartition" placeholder="请选择直播分区">
                    <el-option v-for="(item, i) in livePartition" :key="i" :label="item.name"
                        :value="item.partition"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="直播简介" prop="liveIntroduction">
                <el-input type="textarea" v-model="ruleForm.liveIntroduction"
                    placeholder="填写更全面的相关信息，让更多的人能找到你的直播吧"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">创建直播间</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script>
import { uploadPic } from "@/api/tool/file";
// import { addVideo } from "@/api/other/live";

import Bus from "@/utils/bus";

export default {
    name: "PublishLive",
    components: {
    },
    data() {
        return {
            formData: {
                file: "",
                type: "",
            },
            downloadUrl: process.env.VUE_APP_DOWNLOAD_URL,
            ruleForm: {
                userId: '',
                liveUrl: '',
                liveCover: '',
                liveTitle: '',
                liveType: '',
                livePartition: "",
                liveIntroduction: '',
            },
            rules: {
                // liveUrl: [
                //     { required: true, message: '请上传直播', trigger: 'change' }
                // ],
                liveCover: [
                    { required: true, message: '请上传直播封面', trigger: 'change' }
                ],
                liveTitle: [
                    { required: true, message: '请填写直播标题', trigger: 'blur' },
                    { max: 80, message: '长度不超过 80 个字符', trigger: 'blur' }
                ],
                liveIntroduction: [
                    { max: 250, message: '长度不超过 250 个字符', trigger: 'blur' }
                ],
                liveType: [
                    { required: true, message: '请选择直播类型', trigger: 'change' }
                ],
                livePartition: [
                    { required: true, message: '请选择直播分区', trigger: 'change' }
                ],
            },
            livePartition: [
                {
                    "partition": "animation",
                    "name": "动画区"
                },
                {
                    "partition": "music",
                    "name": "音乐区"
                },
                {
                    "partition": "game",
                    "name": "游戏区"
                },
                {
                    "partition": "dance",
                    "name": "舞蹈区"
                },
                {
                    "partition": "fashion",
                    "name": "时尚区"
                },
            ],
        }
    },

    created() {
        Bus.$on('hasVideoUpload', msg => {
            this.ruleForm.liveUrl = msg;
        })
    },

    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    addVideo(this.ruleForm).then((res) => {
                        console.log(res);
                        this.$message.success("创建直播间成功！");
                        this.resetForm('ruleForm');
                    });
                } else {
                    this.$message.warning("请完善直播间信息！");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            Bus.$emit("resetForm", 1);
        },

        // 文件上传之前,el-upload自动触发
        beforeUploadPic(file) {
            if (file.size > 10 * 1024 * 1024) {
                this.$message.warning("封面大小不能超过10M");
                return 0;
            }
            if (file.type.indexOf("image/") == -1) {
                this.$message.warning('文件格式错误！请上传图片类型,如：.jpg .png .jpeg .gif 后缀的文件!');
                return 0;
            }
            let form = new FormData();
            form.append("file", file);
            form.append("type", 1);
            uploadPic(form).then((res) => {
                console.log(res);
                this.ruleForm.liveCover = res.data.data;
            });
        },
        goBack() {
            this.$router.go(-1);
        },
    },
}

</script>
  
<style scoped>
.el-page-header {
    margin-top: 20px;
    margin-left: 100px;
}

.ruleForm {
    margin-left: 100px;
    margin-top: 50px;
    margin-bottom: 100px;
    width: 800px;
    border: 2px solid rgba(105, 105, 105, 0.2);
}

.liveTitle {
    width: 650px;
}

.avatar {
    width: 300px;
}

.el-icon-plus {
    margin-top: 80px;
}

.uploadButton {
    line-height: 30px;
    position: absolute;
    top: 40%;
    left: 35%;
}
</style>